 <template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button v-if="deviceManager_btn_add" class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="plus">添加</el-button>
    </div>
    <el-table  :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
      
      <el-table-column align="center" label="设备id" width="250">
        <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="平台编号" width="250">
        <template scope="scope">
          <span>{{scope.row.platformId}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="平台名称" width="250">
        <template scope="scope">
          <span>{{scope.row.platformName}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column width="200px" align="center" label="商户编号">
      <template scope="scope">
        <span>{{scope.row.merchantId}}</span>
      </template>
      </el-table-column> -->
      <el-table-column width="100px" align="center" label="账号类型">
        <template scope="scope">
          <span v-if="scope.row.numberType == 'alipay'">支付宝</span>
          <span v-if="scope.row.numberType == 'wechat'">微信</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="账号">
        <template scope="scope">
          <span>{{scope.row.number}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="账号昵称">
        <template scope="scope">
          <span>{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="姓名">
        <template scope="scope">
          <span>{{scope.row.realName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="二维码账户">
        <template scope="scope">
          <img class="" :src="scope.row.accountQrStr" style="width:80px;height:80px">
        </template>
      </el-table-column>
      <!-- <el-table-column width="250px" align="center" label="请求地址">
        <template scope="scope">
          <span>{{scope.row.requestUrl}}</span>
        </template>
      </el-table-column> -->
      <el-table-column width="80px" align="center" label="状态">
        <template scope="scope">
          <span v-if="scope.row.txStatus == '00'">正常</span>
          <span v-if="scope.row.txStatus == '01'">异常</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="250"> 
          <template scope="scope">
            <el-button size="small" v-if="deviceManager_btn_update"  type="info" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="small" v-if="deviceManager_btn_del" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="primary" v-if="deviceManager_btn_detail" size="small" @click="handleDetail(scope.row)">详情</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>

    <el-dialog :title="txtMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="账号类型" prop="numberType">
          <el-select v-model="form.numberType" placeholder="请选择" clearable="">
              <el-option label="支付宝" value="alipay"></el-option>
              <el-option label="微信" value="wechat"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="number">
          <el-input v-model="form.number" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="账号昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="账号昵称"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="form.realName" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="二维码账号" prop="accountQrStr">
          <div class="imgSrc" @click="uploadLogo">
            <img v-if="base64Img" :src="base64Img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </div>
          <input type="file" name="file" id="upload_accountQrSVG" @change="changeImg($event)" accept="image/svg+xml" style="display: none">
        </el-form-item>
        <!--<el-form-item label="请求地址" prop="requestUrl">
          <el-input v-model="form.requestUrl" placeholder="请输入请求地址"></el-input>
        </el-form-item> -->
        <el-form-item label="状态" prop="txStatus">
          <el-select v-model="form.txStatus" placeholder="请选择" clearable="">
              <el-option label="正常" value="00"></el-option>
              <el-option label="异常" value="01"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus == 'create'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-if="dialogStatus == 'update'" type="primary" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="详情" :visible.sync="dialogDetailVisible" width="80%">
      <el-row class="panel-group" :gutter="40">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel" @click="handleSetLineChartData('purchases')">
            <div class="card-panel-icon-wrapper icon-money">
              <svg-icon icon-class="money" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">订单总金额</div>
              <count-to class="card-panel-num" :startVal="0" :endVal="980" :duration="3200">{{dataCount.amt}}</count-to>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel" @click="handleSetLineChartData('purchases')">
            <div class="card-panel-icon-wrapper icon-money">
              <svg-icon icon-class="money" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">今日总金额</div>
              <count-to class="card-panel-num" :startVal="0" :endVal="980" :duration="3200">{{dataCount.todaya}}</count-to>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel" @click="handleSetLineChartData('shoppings')">
            <div class="card-panel-icon-wrapper icon-shoppingCard">
              <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">订单总数</div>
              <count-to class="card-panel-num" :startVal="0" :endVal="1300" :duration="3600">{{dataCount.count}}</count-to>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel" @click="handleSetLineChartData('shoppings')">
            <div class="card-panel-icon-wrapper icon-shoppingCard">
              <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">今日订单数</div>
              <count-to class="card-panel-num" :startVal="0" :endVal="980" :duration="3200">{{dataCount.todayc}}</count-to>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import { pageAll, addObj, deleteObj, updateObj, deviceData } from '@/api/qrDevice/device'
import { getPlatformObj } from '@/api/crm/platform/index'
import { mapGetters } from 'vuex'
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  name: 'functionList',
  data() {
    return {
      form: {
        id: undefined,
        numberType: '',
        number: '',
        requestUrl: '',
        txStatus: '',
        platformId: '',
        accountQrStr: '',
        nickname: '',
        realName: '',
        platformName: ''
      },
      rules: {
        numberType: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        requestUrl: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        txStatus: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ]
      },
      dataCount: {
        amt: 0,
        todaya: 0,
        count: 0,
        todayc: 0
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        platformId: ''
      },
      dialogFormVisible: false,
      dialogDetailVisible: false,
      deviceManager_btn_del: false,
      deviceManager_btn_add: false,
      deviceManager_btn_update: false,
      deviceManager_btn_detail: false,
      tableKey: 0,
      dialogStatus: '',
      txtMap: {
        create: '创建',
        update: '修改'
      },
      base64Img: '',
      platformName: ''
    }
  },
  created() {
    this.getList()
    this.getPlatfromInfo()
    this.deviceManager_btn_add = this.elements['deviceManager:btn_add']
    this.deviceManager_btn_del = this.elements['deviceManager:btn_del']
    this.deviceManager_btn_update = this.elements['deviceManager:btn_update']
    this.deviceManager_btn_detail = this.elements['deviceManager:btn_detail']
  },
  computed: {
    ...mapGetters(['elements', 'platformId'])
  },
  watch: {
    base64Img() {
      this.form.accountQrStr = this.base64Img
    }
  },
  methods: {
    uploadLogo: function() {
      const input = document.getElementById('upload_accountQrSVG')
      input.click()
    },
    changeImg: function(e) {
      console.log('====changeImg===================================')
      console.log(e)
      var _this = this
      var imgLimit = 1024
      var files = e.target.files
      console.log('====files===================================')
      console.log(files)
      var image = new Image()
      if (files.length > 0) {
        var dd = 0
        // var timer = setInterval(function(){
        if (files.item(dd).type !== 'image/svg+xml') {
          return false
        }
        if (files.item(dd).size > imgLimit * 102400) {
          // to do sth
          console.log('====文件过大===================================')
        } else {
          console.log('====文件大小小于最大值===================================')
          image.src = window.URL.createObjectURL(files.item(dd))
          image.onload = function() {
            // 默认按比例压缩
            var w = image.width
            var h = image.height
            var scale = w / h
            w = 200
            h = w / scale
            // 默认图片质量为0.7，quality值越小，所绘制出的图像越模糊
            var quality = 0.7
            // 生成canvas
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            // 创建属性节点
            var anw = document.createAttribute('width')
            anw.nodeValue = w
            var anh = document.createAttribute('height')
            anh.nodeValue = h
            canvas.setAttributeNode(anw)
            canvas.setAttributeNode(anh)
            ctx.drawImage(image, 0, 0, w, h)
            // var ext = image.src.substring(image.src.lastIndexOf(".")+1).toLowerCase();//图片格式
            // var base64 = canvas.toDataURL("image/"+ext, quality );
            var base64 = canvas.toDataURL('image/svg+xml', quality)
            _this.base64Img = base64

            console.log('====_this.base64Img ===================================')
            console.log(_this.base64Img)
          }
        }
      }
    },
    getList() {
      this.listLoading = true
      this.listQuery.platformId = this.platformId
      pageAll(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    getPlatfromInfo() {
      getPlatformObj(this.platformId)
        .then(response => {
          console.log('==========================================')
          console.log(response)
          this.logo_path = response.platformBase.platformLogoStr
          this.platformName = response.platformBase.platformName
        })
    },
    handleFilter() {
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {
      this.form = row
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteObj(row).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      })
    },

    create(formName) {
      this.form.platformId = this.platformId
      this.form.platformName = this.platformName
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form).then(response => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },

    update(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          updateObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },

    handleDetail(row) {
      deviceData(row).then(response => {
        if (response.data) {
          var ddd = response.data
          if (ddd.amt) {
            this.dataCount.amt = ddd.amt
          }
          if (ddd.todaya) {
            this.dataCount.todaya = ddd.todaya
          }
          if (ddd.count) {
            this.dataCount.count = ddd.count
          }
          if (ddd.todayc) {
            this.dataCount.todayc = ddd.todayc
          }
        }
        this.dialogDetailVisible = true
      })
    },

    resetTemp() {
      this.form = {
        id: undefined,
        bankName: '',
        bankAccountName: '',
        bankNo: ''
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.panel-group {
  margin-top: 18px;
  .card-panel-col{
    margin-bottom: 32px;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
         background: #40c9c6;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #f4516c;
      }
      .icon-shoppingCard {
        background: #34bfa3
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #f4516c;
    }
    .icon-shoppingCard {
      color: #34bfa3
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin-top: 26px;
      margin-left: 0px;
      margin-right: 20px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }

    .el-dialog {
        position: relative;
        margin: 0 auto 50px;
        background: #fff;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }
  }
}
</style>
